<style lang="less">
    .modal-box img{
        width: 600px;
    }
</style>
<template>
    <Card>
        <p slot="title">
            <Breadcrumb>
                <BreadcrumbItem to="/dashboard/index"><Icon type="ios-home-outline"></Icon> 首页</BreadcrumbItem>
                <BreadcrumbItem to="/product/list"><Icon type="ios-list"></Icon> 订单管理</BreadcrumbItem>
                <BreadcrumbItem to="/product/order"><Icon type="ios-copy-outline"></Icon> 订单列表</BreadcrumbItem>
            </Breadcrumb>
        </p>
        <Form class="step-form" ref="searchForm" :model="searchForm" :rules="searchFormRules" :label-width="100">
            <Row>
                <Col span="6">
                <FormItem label="手机号：" prop="moble">
                    <Input :disabled="hasSubmit" v-model="searchForm.moble" placeholder="输入手机号"></Input>
                </FormItem>
                </Col>
                <Col span="6">
                <FormItem label="订单状态：" prop="status">
                    <Select :disabled="hasSubmit" multiple v-model="searchForm.status">
                        <Option value="1">已支付</Option>
                        <Option value="2">配送中</Option>
                        <Option value="3">已完成</Option>
                    </Select>
                </FormItem>
                </Col>
                <Col span="7">
                <Row>
                    <Col span="12">
                    <FormItem label="发布时间：" prop="date_s">
                        <DatePicker :disabled="hasSubmit" type="date" placeholder="开始时间" prop="date_s" v-model="searchForm.date_s"></DatePicker>
                    </FormItem>

                    </Col>
                    <Col span="1" style="text-align: center">-</Col>
                    <Col span="7">
                    <FormItem :label-width="1" prop="date_e">
                        <DatePicker :disabled="hasSubmit" type="date" placeholder="结束时间" prop="date_e" v-model="searchForm.date_e"></DatePicker>
                    </FormItem>
                    </Col>
                </Row>
                </Col>
            </Row>
            <Row>
                <Row>
                    <Col span="6">
                    <FormItem label="姓名：" prop="nick_name">
                        <Input :disabled="hasSubmit" v-model="searchForm.nick_name" placeholder="输入姓名"></Input>
                    </FormItem>
                    </Col>
                    <Col span="6">
                    <FormItem label="用户ID：" prop="user_id">
                        <Input :disabled="hasSubmit" v-model="searchForm.user_id" placeholder="输入ID"></Input>
                    </FormItem>
                    </Col>
                    <Col span="6">
                    <FormItem label="订单编号：" prop="order_no">
                        <Input :disabled="hasSubmit" v-model="searchForm.order_no" placeholder="输入订单编号"></Input>
                    </FormItem>
                    </Col>
                    <Col span="6">
                    <FormItem>
                        <Button type="primary" :disabled="hasSubmit" @click="handleSubmit('searchForm')" :loading="searchBrnLoading" icon="search">查询</Button>
                        <Button type="ghost" @click="handleReset('searchForm')" style="margin-left: 8px">重置</Button>
                        <!--<Button type="success" @click="handleToEditPage()" style="float: right">文章录入</Button>-->
                    </FormItem>
                    </Col>
                </Row>
            </Row>
        </Form>
        <ButtonGroup v-if="this.tableSelects.length>0">
            <Poptip
                    confirm
                    title="确认全部配送？"
                    @on-ok="handeStatusAll(2)"
            >
                <Button>全部配送</Button>
            </Poptip>
            <Poptip
                    confirm
                    title="确认全部送达？"
                    @on-ok="handeStatusAll(3)"
            >
                <Button>全部送达</Button>
            </Poptip>
        </ButtonGroup>
        <Table
                border
                ref="selection"
                :columns="columns"
                :data="list"
                :loading="loading"
                @on-selection-change="this.selectRow"
        ></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page
                        :total="total"
                        :current="current"
                        :page-size="pageSize"
                        :show-elevator="true"
                        :page-size-opts="[12, 20, 30, 40]"
                        :show-sizer="true"
                        @on-change="changePage"
                        @on-page-size-change="changePageSize"
                ></Page>
            </div>
        </div>
        <Modal
                v-model="modalLog"
                :title="order_no"
                cancel-text=''
        >
            <Timeline>
                <TimelineItem v-for="item in orderLogList">
                    <p class="time">{{item.create_time | formatDate}}</p>
                    <p class="content">{{item.text}}</p>
                </TimelineItem>
            </Timeline>
        </Modal>
    </Card>
</template>
<script>
    import Util from '../../libs/util';
    import moment from 'moment';
    import expandRow from './components/tableExpand.vue';

    export default {
        filters: {
            formatDate: function (value) {
                return Util.formatDate(value);
            }
        },
        data () {
            return {
                columns: [
                    {
                        type: 'selection',
                        key: 'order_id',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '',
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(expandRow, {
                                props: {
                                    row: params.row
                                }
                            });
                        }
                    },
                    {
                        title: 'ID',
                        align: 'center',
                        width: 60,
                        key: 'order_id'
                    },
                    {
                        title: '订单编号',
                        key: 'order_no'
                    },
                    {
                        title: '用户',
                        key: 'moble'
                    },
                    {
                        title: '昵称',
                        key: 'nick_name'
                    },
                    {
                        title: '商品数量',
                        key: 'buy_num_total'
                    },
                    {
                        title: '支付总积分',
                        key: 'pay_point'
                    },
                    {
                        title: '状态',
                        key: 'status_text'
                    },
                    {
                        title: '支付时间',
                        key: 'pay_time',
                        render: (h, params) => {
                            return h('div', Util.formatDate(params.row.create_time));
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        disabled: params.row.status==1? false: true
                                    },
                                    style: {
                                        marginRight: '5px'
                                    }
                                }, [
                                    h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '确定配送中？',
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            'on-ok': () => {
                                                this.handleStatus(params.row.order_id, 2);
                                            }
                                        }
                                    }, '配送')
                                ]),
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        disabled: params.row.status==2? false: true
                                    }
                                }, [
                                    h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '确定已送达？',
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            'on-ok': () => {
                                                this.handleStatus(params.row.order_id, 3);
                                            }
                                        }
                                    }, '已送达')
                                ])
                            ]);
                        }
                    }
                ],
                list: [],
                total: 0,
                current: this.$route.params.page ? this.$route.params.page : 1,
                pageSize: 12,
                loading: true,
                searchForm: {
                    moble: '',
                    date_s: '',
                    date_e: '',
                    nick_name: '',
                    user_id: '',
                    order_no: '',
                    status: []
                },
                searchFormRules: {
                },
                hasSubmit: false,
                tableSelects: [],
                searchBrnLoading: false,
                modalLog: false,
                order_no: '',
                orderLogList: [],
                formCharge: {
                    charge_num: '',
                    amount: ''
                },
                ruleCharge: {
                    charge_num: { required: true, message: '必须输入数量', trigger: 'blur' },
                    amount: { required: true, message: '必须输入金额', trigger: 'blur' }
                }
            };
        },
        mounted: function () {
            this.$nextTick(function () {
                const $params = {page: this.current};
                this.getList($params);
            });
        },
        methods: {
            getList: function (params) {
                Util.ajax.post(`/adminapi/order/list`, params).then(response => {
                    this.list = response.data.data.list;
                    this.total = response.data.data.total;
                    this.current = response.data.data.current;
                    this.pageSize = response.data.data.pageSize;
                    this.loading = false;
                    this.hasSubmit = false;
                });
                this.searchBrnLoading = false;
            },
            selectRow (selection, row) {
                this.tableSelects = selection;
            },
            show (index) {
                let no = this.list[index].order_no;
                Util.ajax.post(`/adminapi/order/log`, {order_no: no}).then(response => {
                    this.orderLogList = response.data.data;
                });
                this.modalLog = true;
                this.order_no = '挂单号：' + no;
            },
            remove (index) {
                this.data6.splice(index, 1);
            },
            changePage (e) {
                this.loading = true;
                const params = {page: e, pageSize: this.pageSize};
                this.list = this.getList(params);
            },
            changePageSize (e) {
                this.loading = true;
                const params = {page: 1, pageSize: e};
                this.list = this.getList(params);
            },
            handleSubmit (name) {
                this.searchBrnLoading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.hasSubmit = true;
                        let params = {
                            ...this.searchForm,
                            page: 1,
                            pageSize: this.pageSize
                        };
                        params.date_s = params.date_s? moment(params.date_s).format('X'): '';
                        params.date_e = params.date_e? moment(params.date_e).subtract(-1, "days").format('X'): '';
                        this.getList(params);
                    } else {
                        this.searchBrnLoading = false;
                    }
                });
            },
            handleReset (name) {
                this.$refs[name].resetFields();
                this.searchForm.status = [];
                this.hasSubmit = false;
                this.getList();
            },
            handleStatus (order_id, status) {
                Util.ajax.post(`/adminapi/order/edit`, {order_id: order_id, status: status}).then(response => {
                    if(response.data.code == 0) {
                        this.$Message.success('操作成功');
                        this.modalAdd = false;
                        this.getList();
                    }else {
                        this.$Message.error('操作失败');
                    }
                });
            },
            handeStatusAll (status) {
                let ids = [];
                this.tableSelects.map(function (v, i) {
                    ids[i] = v.order_id;
                });
                const params = {order_id: ids, status: status};
                Util.ajax.post(`/adminapi/order/edit`, params).then(response => {
                    if(response.data.code==0) {
                        const params = {page: this.current, pageSize: this.pageSize};
                        this.getList(params);
                        this.tableSelects = [];
                        this.$Message.success('操作成功');
                    }else {
                        this.$Message.error({
                            content: response.data.msg,
                            duration: 5
                        });
                    }
                });
            },
        }
    };
</script>
